<template>
  <a-modal
    title="批量调动"
    :open="props.modelVisible"
    ok-text="确认"
    cancel-text="取消"
    @ok="onOk"
    @cancel="onCancel"
    :maskClosable="true"
  >
    <a-form ref="formRef" :model="formState">
      <a-form-item
        label="小组"
        name="teamId"
        :rules="[{ required: true, message: '小组不能为空' }]"
      >
        <a-select
          v-model:value="formState.teamId"
          placeholder="请选择小组"
          style="width: 300px"
          :field-names="{ label: 'teamName', value: 'teamId' }"
          :options="props.teams"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { message, type FormInstance } from 'ant-design-vue';
import UserDao from '@/daos/user_dao';

const userDao = new UserDao();
//modelVisible用于开关窗口，默认关闭
const props = defineProps({
  modelVisible: {
    type: Boolean,
    default: false
  },
  classId: {
    type: Number
  },
  teams: {
    type: Array
  },
  students: {
    type: Array<number>
  }
});
//表单对象
const formState = reactive({
  teamId: undefined
});
//emit用于修改窗口状态
const emit = defineEmits(['update:modelVisible', 'confirm']);
//定义表单
const formRef = ref<FormInstance>();
const onOk = () => {
  formRef.value
    .validateFields()
    .then(() => {
      userDao.setTeamForStudents(props.classId, formState.teamId, props.students).then((result) => {
        message.success(result.data.msg);
        emit('confirm');
        emit('update:modelVisible', false);
      });
    })
    .catch((error) => {
      console.error('数据验证失败:', error);
    });
};
const onCancel = () => {
  // formRef.value.resetFields();
  emit('update:modelVisible', false);
};

watch(
  () => props.modelVisible,
  () => {
    if (props.modelVisible == true) {
      console.log(props.classId);
      console.log(props.teams);
      console.log(props.students);
    }
  }
);
</script>
